<template>
  <div class="wholeContainer">
    <div class="formUp clearfix">
      <img class="fl scheduleImg" src="@/assets/schedule.jpg" alt="" />
      <h1 class="fl title">排班</h1>
      <el-dropdown class="fl staffChose" trigger="click">
        <span class="el-dropdown-link">
          员工<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">zyx</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">芬兰</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="fl ruleChose" trigger="click">
        <span class="el-dropdown-link">
          排班规则<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">zyx</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">芬兰</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-radio-group
        class="fr choseItem"
        v-model="tabPosition"
        style="margin-bottom: 30px"
        size="small"
      >
        <el-radio-button label="top">周视图</el-radio-button>
        <el-radio-button label="right">日视图</el-radio-button>
      </el-radio-group>

      <el-date-picker
        class="fr"
        v-model="day"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div>
    <div class="tableContainer">
      <table>
        <thead>
          <tr class="headline">
            <th v-for="(item, index) in thItem" :key="index">
              <div class="headContainer">{{ item.week }}/{{ item.day }}</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(classItem, index) in classes" :key="index">
            <td v-for="(smallClassItem, index) in classItem" :key="index">
              <el-popover placement="top-start" width="450" trigger="click">
                <img
                  class="classItemImg cursor"
                  src="@/assets/员工排班图.png"
                  alt=""
                  @click="dialogVisible = true"
                />
                <!-- <h3>本班次员工</h3>
                <div class="classItemContainer clearfix">
                  <el-tag
                    class="tagItem fl"
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput"
                    >+ New Tag</el-button
                  >
                </div> -->
                <div
                  :class="{
                    workCotainer: smallClassItem.name == '白天固定班',
                    workCotainer2: smallClassItem.name == '关店班次',
                    workCotainer3: smallClassItem.name == '开店班次',
                    workCotainer4: smallClassItem.name == '休息',
                  }"
                  slot="reference"
                >
                  {{ smallClassItem.name }}<br />{{ smallClassItem.time }}
                </div>
                <!-- <el-button slot="reference">hover 激活</el-button> -->
              </el-popover>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 弹出框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <img class="bigPhoto" src="@/assets/图片4.png" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "schedule",
  data() {
    return {
      dynamicTags: ["zyx", "芬兰", "whn"],
      inputVisible: false,
      dialogVisible: false,
      inputValue: "",
      day: "",
      week: "",
      tabPosition: "top",
      thItem: [
        { week: "周一", day: "4.11" },
        { week: "周二", day: "4.12" },
        { week: "周三", day: "4.13" },
        { week: "周四", day: "4.14" },
        { week: "周五", day: "4.15" },
        { week: "周六", day: "4.16" },
        { week: "周七", day: "4.17" },
      ],
      classes: [
        [
          {
            name: "开店班次",
            time: "8:00-9:00",
          },
          {
            name: "开店班次",
            time: "8:00-9:00",
          },
          {
            name: "休息",
            time: "8:00-9:00",
          },
          {
            name: "开店班次",
            time: "8:00-9:00",
          },
          {
            name: "开店班次",
            time: "8:00-9:00",
          },
          {
            name: "开店班次",
            time: "8:00-9:00",
          },
          {
            name: "开店班次",
            time: "8:00-9:00",
          },
        ],
        [
          {
            name: "白天固定班",
            time: "9:00-10:00",
          },
          {
            name: "白天固定班",
            time: "9:00-10:00",
          },
          {
            name: "休息",
            time: "9:00-10:00",
          },
          {
            name: "白天固定班",
            time: "9:00-10:00",
          },
          {
            name: "白天固定班",
            time: "9:00-10:00",
          },
          {
            name: "白天固定班",
            time: "9:00-10:00",
          },
          {
            name: "白天固定班",
            time: "9:00-10:00",
          },
        ],
        [
          {
            name: "白天固定班",
            time: "10:00-11:00",
          },
          {
            name: "白天固定班",
            time: "10:00-11:00",
          },
          {
            name: "休息",
            time: "10:00-11:00",
          },
          {
            name: "白天固定班",
            time: "10:00-11:00",
          },
          {
            name: "白天固定班",
            time: "10:00-11:00",
          },
          {
            name: "白天固定班",
            time: "10:00-11:00",
          },
          {
            name: "白天固定班",
            time: "10:00-11:00",
          },
        ],
        [
          {
            name: "白天固定班",
            time: "11:00-12:00",
          },
          {
            name: "白天固定班",
            time: "11:00-12:00",
          },
          {
            name: "休息",
            time: "11:00-12:00",
          },
          {
            name: "白天固定班",
            time: "11:00-12:00",
          },
          {
            name: "白天固定班",
            time: "11:00-12:00",
          },
          {
            name: "白天固定班",
            time: "11:00-12:00",
          },
          {
            name: "白天固定班",
            time: "11:00-12:00",
          },
        ],
        [
          {
            name: "白天固定班",
            time: "12:00-13:00",
          },
          {
            name: "白天固定班",
            time: "12:00-13:00",
          },
          {
            name: "休息",
            time: "12:00-13:00",
          },
          {
            name: "白天固定班",
            time: "12:00-13:00",
          },
          {
            name: "白天固定班",
            time: "12:00-13:00",
          },
          {
            name: "白天固定班",
            time: "12:00-13:00",
          },
          {
            name: "白天固定班",
            time: "12:00-13:00",
          },
        ],
        [
          {
            name: "休息",
            time: "13:00-14:00",
          },
          {
            name: "休息",
            time: "13:00-14:00",
          },
          {
            name: "休息",
            time: "13:00-14:00",
          },
          {
            name: "休息",
            time: "13:00-14:00",
          },
          {
            name: "休息",
            time: "13:00-14:00",
          },
          {
            name: "休息",
            time: "13:00-14:00",
          },
          {
            name: "休息",
            time: "13:00-14:00",
          },
        ],
        [
          {
            name: "白天固定班",
            time: "14:00-15:00",
          },
          {
            name: "白天固定班",
            time: "14:00-15:00",
          },
          {
            name: "休息",
            time: "14:00-15:00",
          },
          {
            name: "白天固定班",
            time: "14:00-15:00",
          },
          {
            name: "白天固定班",
            time: "14:00-15:00",
          },
          {
            name: "白天固定班",
            time: "14:00-15:00",
          },
          {
            name: "白天固定班",
            time: "14:00-15:00",
          },
        ],
        [
          {
            name: "白天固定班",
            time: "16:00-17:00",
          },
          {
            name: "白天固定班",
            time: "16:00-17:00",
          },
          {
            name: "休息",
            time: "16:00-17:00",
          },
          {
            name: "白天固定班",
            time: "16:00-17:00",
          },
          {
            name: "白天固定班",
            time: "16:00-17:00",
          },
          {
            name: "白天固定班",
            time: "16:00-17:00",
          },
          {
            name: "白天固定班",
            time: "16:00-17:00",
          },
        ],
        [
          {
            name: "关店班次",
            time: "17:00-18:00",
          },
          {
            name: "关店班次",
            time: "17:00-18:00",
          },
          {
            name: "休息",
            time: "17:00-18:00",
          },
          {
            name: "关店班次",
            time: "17:00-18:00",
          },
          {
            name: "关店班次",
            time: "17:00-18:00",
          },
          {
            name: "关店班次",
            time: "17:00-18:00",
          },
          {
            name: "关店班次",
            time: "17:00-18:00",
          },
        ],
      ],
      infors: [
        {
          name: "强制加班",
          times: [
            {
              time: "9.00-11.00",
              people: ["whn", "zyx", "芬兰"],
            },
            {
              time: "12.00-14.00",
              people: ["whn", "zyx", "芬兰"],
            },
            {
              time: "16.00-18.00",
              people: ["zyx", "芬兰"],
            },
            {
              time: "20.00-24.00",
              people: ["whn", "芬兰"],
            },
          ],
        },
        {
          name: "别想休息",
          times: [
            {
              time: "9.00-11.00",
              people: ["whn", "zyx", "芬兰"],
            },
            {
              time: "12.00-14.00",
              people: ["whn", "zyx", "芬兰"],
            },
            {
              time: "16.00-18.00",
              people: ["zyx", "芬兰"],
            },
            {
              time: "20.00-24.00",
              people: ["whn", "芬兰"],
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeWork(people, work) {
      console.log(people);
      console.log(work.time);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
/* 设置表格样式 */
table {
  border-collapse: collapse;
  /* width: 100%; */
}

/* 设置表头样式 */
th {
  font-weight: normal;
  /* color: #E8E8E8; */
  /* border: 1px solid white; */
  /* background-color: #3765ff; */
  text-align: center;
  /* padding: 8px; */
  width: 150px;
}

/* 设置表格单元格样式 */
td {
  text-align: center;
}

/* 设置鼠标样式 */
td:hover {
  cursor: pointer;
}
tr {
  height: 50px;
}
.headContainer {
  height: 45px;
  line-height: 45px;
  margin: 0 5px;
  border-radius: 5px;
  background-color: #e8e8e8;
}
.workCotainer {
  color: white;
  box-sizing: border-box;
  padding: 5px 20px;
  height: 45px;
  line-height: 18px;
  margin: 5px 5px;
  border-radius: 5px;
  background-color: #0078fc;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.workCotainer2 {
  color: white;
  box-sizing: border-box;
  padding: 5px 20px;
  height: 45px;
  line-height: 18px;
  margin: 5px 5px;
  border-radius: 5px;
  background-color: #0f3b80;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.workCotainer3 {
  color: white;
  box-sizing: border-box;
  padding: 5px 20px;
  height: 45px;
  line-height: 18px;
  margin: 5px 5px;
  border-radius: 5px;
  background-color: #6aa4fe;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.workCotainer4 {
  color: #8e8e8e;
  box-sizing: border-box;
  padding: 5px 20px;
  height: 45px;
  line-height: 18px;
  margin: 5px 5px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.tableContainer {
  background-color: #fafafa;
  padding: 10px;
}
/*用于存放这个班次的员工信息 */
.classItemContainer {
  color: #000;
  width: 200px;
  height: 150px;
}
/**表格上方区域 */
.formUp {
  padding: 0 10px 0 0;
}
.scheduleImg {
  background-color: pink;
  width: 40px;
  height: 40px;
  background-image: url("@/assets/schedule.jpg");
  border-radius: 3px;
}
.title {
  line-height: 40px;
  margin-left: 10px;
}
.choseItem {
  margin-left: 10px;
  line-height: 40px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #000;
}
.el-icon-arrow-down {
  font-size: 14px;
}
.demonstration {
  display: block;
  /* color: #8492a6; */
  font-size: 14px;
  margin-bottom: 20px;
}
.staffChose {
  font-size: 18px;
  font-weight: 700;
  margin-left: 50px;
  line-height: 40px;
}
.ruleChose {
  font-size: 18px;
  font-weight: 700;
  margin-left: 20px;
  line-height: 40px;
}

.el-tag + .el-tag {
  /* margin-left: 10px; */
}
.button-new-tag {
  margin: 5px;
  /* margin-left: 10px; */
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  /* width: 90px; */
  /* margin-left: 10px; */
  vertical-align: bottom;
}
.tagItem {
  float: left;
  margin: 5px;
}

.wholeContainer {
  padding: 20px;
  width: 98%;
  height: 630px;
  background-color: white;
  border-radius: 10px;
}

/*点击排班后展示的图片 */
.classItemImg {
  width: 100%;
}
/**大图 */
.bigPhoto {
  width: 100%;
}
</style>